import { dom } from "../../tool";
import iconList from './data';
import "../index.less";
interface PropType {
    type: string;
    disabled?: boolean;
    onClick?: () => void;
    style?: string;
    target?: HTMLElement;
}

interface IconType {
    new (props:PropType): IconType;
    render: (node?: HTMLElement) => HTMLElement;
    setActive: (active: boolean) => void;
    setDisabled: (disabled: boolean) => void;
    active: boolean;
    disable: boolean;
}
const disabledName = "gkh-disabled";
const activeName = "gkh-active";
function Icon(this: IconType, props: PropType) {
    const { type, disabled = false, onClick, style, target } = props;
    this.disable = disabled;
    const container = dom('span', {
        target,
        className: disabled ? "gkh-icon "+ disabledName : "gkh-icon",
        attribute: {
            role: "img"
        },
        style
    });
    container.innerHTML="<svg viewBox='64 64 896 896' width='1em' height='1em' fill='currentColor' focusable='false'><path d='"+iconList[type]+"'></path></svg>"
    if (onClick) {
        container.onclick = onClick;
    }
    this.active = false;
    this.setActive = (arg) => {
        if (!this.disable) {
            this.active = arg;
            let className = container.getAttribute('class') || '';
            const index = className.indexOf(activeName);
            if (arg) {
                if (index < 0) {
                    if (className.length > 0) {
                        className += " ".concat(activeName);
                    } else {
                        className += activeName;
                    }
                    container.setAttribute('class', className);
                }
            } else if (index > -1) {
                className = className.substring(0, index).concat(className.substring(index + activeName.length));
                if (className.charAt(0) === ' ') {
                    className = className.substring(1);
                }
                if (className.charAt(className.length - 1) === ' ') {
                    className = className.substring(0, className.length - 1);
                }
                container.setAttribute('class', className);
            }
        }
    }
    this.setDisabled = (arg) => {
        this.disable = arg;
        let className = container.getAttribute('class') || '';
        const index = className.indexOf(disabledName);
        if (this.disable) {
            if (index < 0) {
                if (className.length > 0) {
                    className += " ".concat(disabledName);
                } else {
                    className += disabledName;
                }
                container.setAttribute('class', className);
            }
        } else if (index > -1) {
            className = className.substring(0, index).concat(className.substring(index + disabledName.length));
            if (className.charAt(0) === ' ') {
                className = className.substring(1);
            }
            if (className.charAt(className.length - 1) === ' ') {
                className = className.substring(0, className.length - 1);
            }
            container.setAttribute('class', className);
        }
    }
    this.render = (node) => {
        if (node) node.appendChild(container);
        return container;
    }
    return this;
}

export default Icon as unknown as IconType;
